<template>
  <div class="all_song_info">
      <div
        class="all_list"
        v-for="(index, id) in special_list.info"
        :key="index.id"
        @mouseenter="en_list(id)"
        @mouseleave="le_list"
        @click="go_songList(index.specialid,index.imgurl,index.specialname,index.publishtime)"
      >
        <img v-lazy="index.imgurl" alt="图片" @mouseenter="en_list(id)"/>
        <span class="iconfont icon-24gl-play"> {{ index.playcount }}</span>
        <div class="show" v-show="bg_show==id?true:false">
          <span class="iconfont icon-yunhang"></span>
        </div>

        <p @mouseenter="en_p(id)" @mouseleave="le_p" :class="{color:text_color==id}">{{ index.specialname }}</p>
      </div>
    </div>
</template>

<script>

export default {
    data(){
        return{
            bg_show: null,
            text_color:null,
        }
    },
    props:["special_list"],
    mounted(){
    },
    methods:{
        //页面交互效果
    en_list(index){
      this.bg_show=index
    },
    le_list(){
      this.bg_show=null
    },
    en_p(index){
      this.bg_show=null
      this.text_color=index
    },
    le_p(){
      this.text_color=null
    },
    //带参数跳转到歌曲列表
    go_songList(index, a, b, c) {
      this.$router.push({
        name: "album_list",
        query: {
          special: index,
          img: a,
          name: b,
          time: c,
        },
      });
    },
  },
}
</script>

<style lang="less">
.all_song_info {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .all_list {
      width: 180px;
      height: 220px;
      position: relative;
      cursor: pointer;
      img {
        width: 180px;
        height: 180px;
        border-radius: 10px;
      }
      .icon-24gl-play {
        position: absolute;
        left: 10px;
        top: 160px;
        font-size: 12px;
        color: #fff;
        // -webkit-transform: scale(0.8);
      }
      .show {
        position: absolute;
        top: 0;
        width: 180px;
        height: 180px;
        background-color: #000;
        opacity: 0.5;
        border-radius: 10px;
        .icon-yunhang {
          position: absolute;
          font-size: 40px;
          top: 70px;
          left: 70px;
          color: #fff;
        }
      }
      p {
        font-size: 12px;
        height: 32px;
      }
    }
    .all_list:last-child:nth-child(5n-1) {
      margin-right: 205px;
    }
    .all_list:last-child:nth-child(5n-2) {
      margin-right: 410px;
    }
    .all_list:last-child:nth-child(5n-3) {
      margin-right: 615px;
    }
  }
  .color{
    color: #00a9ff;
  }
</style>